/* constantRoutes是用户可以访问的默认路由 */
import { constantRoutes, asyncRoutes } from '@/router/index'

/* 定义共享数据 */
const state = {
  routes: constantRoutes
}

/* 定义修改数据 */
const mutations = {
  /* newRoutes是用户可以访问的权限路由 */
  setRoutes(state, newRoutes) {
    state.routes = [...constantRoutes, ...newRoutes]
  }
}

/* 定义异步数据 */
const actions = {
  /* 筛选用户的权限路由 */
  /*
    menus是用户可以访问的路由数组
    asyncRoutes是所有的权限路由
    我们要遍历menus拿到用户可以访问的路由去和所有权限路由对比,找到相同的权限路由让后,把它存放到一个新数组里
  */
  filterRoutes(context, menus) {
    const routes = []
    menus.forEach(key => {
      routes.push(...asyncRoutes.filter(item => item.name === key))
    })
    /* 将筛选出来的权限路由存放到路由对象里,用于显示左侧菜单栏 */
    /* 因为权限路由是响应式添加的,所以要在添加后再添加404路由,才不会导致刷新后被404路由拦截. */
    context.commit('setRoutes', [...routes, { path: '*', redirect: '/404', hidden: true }])
    /* 将筛选出来的权限路由返回出去,用于添加路由访问路径 */
    return routes
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
